<template>
    <div>
      <ul class="listBOX">
        <li class="list common_bg_fff" v-for="(item, index) in list">
          <div class="userInfo">
            <span class="font_222_30">{{item.con_name}}</span>
            <span class="font_222_30">{{item.con_tel}}</span>
          </div>
          <p class="font_222_28 userAdress">{{item.address_dis}}{{item.address_detail}}</p>
          <div class="userInfo">
            <div @click="setMOREN(item.id)">
              <i class="iconfont icon-gouhao font_FC5E5F_28" v-if="item.is_default=='1'"></i>
              <i class="iconfont icon-weixuanzhong font_888_28" v-if="item.is_default=='0'"></i>
              <span class="font_888_28" :class="{'font_FC5E5F_28':item.is_default=='1'}">[默认地址]</span>
            </div>
            <ul class="userInfo operation">
              <li @click="edit(item.id)"><i class="iconfont icon-iconfontedit "></i><span class="font_888_28">编辑</span></li>
              <li @click="del(item.id)"><i class="iconfont icon-shanchu "></i><span class="font_888_28">删除</span></li>
            </ul>
          </div>
        </li>
      </ul>
      <div class="btn font_fff_36" @click="addAdress">增加新地址</div>

      <div class="comon_bg_black" v-if="isdel">
        <div class="choice_box common_bg_fff">
          <p class="font_333_34">确定删除地址？</p>
          <ul class="choice_btn">
            <li @click="cancelDEL">取消</li>
            <li @click="delAdress">确认</li>
          </ul>
        </div>
      </div>
    </div>
</template>

<script>

    export default {
        name: '',
        components: {},
        data() {
            return {
              title:'地址管理',
              list:[],
              choose:true,
              isdel:false,
              delID:null
            }
        },
        created () {
        this.setTitle(this.title)
      },
        mounted: function () {
          this.axios.post('/home/Address/addressList',{token:this.$store.state.token}).then((res)=>{
            if(res.data.code==200){
              this.list = res.data.data
            }
          })
        },
        methods: {
          addAdress(){
            this.$router.push('/recovery/addAdress')
          },
          edit(id){
            this.$router.push({
              path: '/recovery/addAdress',
              name: 'addAdress',
              params: {
                id: id
              }
            })
          },
          del(id){
            this.isdel = !this.isdel
            this.delID = id
          },
          delAdress(){
            this.axios.post('/home/Address/delAddress',{
              token:this.$store.state.token,
              a_id:this.delID
            }).then((res)=>{
              if(res.data.code==200){
                window.location.reload()
              }
            })
          },
          cancelDEL(){
            this.isdel = !this.isdel
            this.delID = null
          },
//          设置默认地址
          setMOREN(id){
            this.axios.post('/home/Address/defaultAddress',{
              token:this.$store.state.token,
              a_id:id
            }).then((res)=>{
              if(res.data.code==200){
                this.axios.post('/home/Address/addressList',{token:this.$store.state.token}).then((res)=>{
                  if(res.data.code==200){
                    this.list = res.data.data
                  }
                })
              }
            })
          },
//          选择这个地址
          chooseA(id){
            this.$router.push({
              path: '/recoveryIndex',
              name: 'recoveryIndex',
              params: {
                A_id: id
              }
            })
          },
        }
    }
</script>

<style scoped>
  @import "//at.alicdn.com/t/font_814275_a49o0xc0z4m.css";
  @import "../../assets/public.css";
  .iconfont{
    margin-right:.16rem;
  }
  .listBOX>li:not(:first-child){
    border-top: 1px solid #F2F2F2;
  }
  .list{
    padding:.3rem .3rem .2rem .44rem;
  }
  .listBOX{
    margin-top:.26rem;
  }
  .userInfo{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .userAdress{
    margin-top:.2rem;
    margin-bottom:.62rem;
  }
  .operation>li:first-child{
    margin-right:.53rem;
  }
  .btn{
    width:6.92rem;
    height:.88rem;
    background:#28ac4f; /* 一些不支持背景渐变的浏览器 */
    background: -webkit-linear-gradient(right, #28ac4f, #3aab5c); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, #28ac4f, #3aab5c); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, #28ac4f, #3aab5c); /* Firefox 3.6 - 15 */
    background: linear-gradient(right, #28ac4f, #3aab5c); /* 标准的语法 */
    text-align: center;
    line-height: .88rem;
    margin: 1.11rem auto 0;
    border-radius: 5px;
  }

  .choice_box{
    width:5.41rem;
    height:2.51rem;
    border-radius: .3rem;
    /*margin:0 auto;*/
    transform: translate(-50%,-50%);
    position: absolute;
    top:50%;
    left:50%;
  }
  .choice_box>p{
    height:1.52rem;
    line-height: 1.52rem;
    text-align: center;
  }
  .choice_btn{
    height:.98rem;
    display: flex;
    align-items: center;
    border-top: 1px solid #ddd;
  }
  .choice_btn>li:first-child{
    border-right: 1px solid #ddd;
  }
  .choice_btn>li{
    flex:1;
    height:.98rem;
    font-size:.36rem;
    color: #3794E1;
    text-align: center;
    /*display: inline-block;*/
    /*vertical-align: middle;*/
    line-height: .98rem;
  }
</style>
